<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-28 22:55
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <vue-draggable
    v-model="children"
    :options="draggableOptions"
    tag="div"
    class="x-render-drag-table-container"
  >
    <template v-for="(item) in xDesignTable.tableColumnOptions">
      <ColumnGroup v-if="item.isGroup" :key="item.id" :data="item" @remove="removeHandler"
                   @copy="copyHandler"></ColumnGroup>
      <Column v-else :key="item.id" :data="item" @remove="removeHandler" @copy="copyHandler"></Column>
    </template>
  </vue-draggable>
</template>

<script>
import Column from './column'
import ColumnGroup from './group'
import {cloneDeep} from 'lodash'
import {getTableColumnOption, randomString} from '../../../../../libs/utils'

export default {
  name: 'XRenderColumnDraggable',
  inject: ['xDesignTable'],
  components: {
    Column,
    ColumnGroup
  },
  computed: {
    draggableOptions: {
      get() {
        return {
          group: 'XRenderTableColumn',
          sort: true,
          animation: 300,
          draggable: '.x-render-drag-table-drag-item',
          handler: '.x-render-drag-table-drag-item',
          disabled: false
        }
      }
    },
    children: {
      get() {
        const {xDesignTable} = this
        return xDesignTable.tableColumnOptions || []
      },
      set(list) {
        const {xDesignTable} = this
        const tmpList = cloneDeep(list)
        for (const tmp of tmpList) {
          tmp.level = 1
          tmp.parentId = ''
        }
        xDesignTable.tableColumnOptions.splice(0, xDesignTable.tableColumnOptions.length, ...tmpList)
      }
    }
  },
  methods: {
    removeHandler(data) {
      const {xDesignTable} = this
      const columnOption = this.getColumnOption(data)
      if (columnOption) {
        const findIndex = columnOption.children.findIndex(item => item.id === data.id)
        if (findIndex !== -1) {
          columnOption.children.splice(findIndex, 1)
        }
      } else {
        const findIndex = xDesignTable.tableColumnOptions.findIndex(item => item.id === data.id)
        if (findIndex !== -1) {
          xDesignTable.tableColumnOptions.splice(findIndex, 1)
        }
      }
    },
    copyHandler(data) {
      const {xDesignTable} = this
      const columnOption = this.getColumnOption(data)
      const copyData = function (data) {
        const obj = cloneDeep(data)
        obj.id = randomString()
        return obj
      }
      const obj = copyData(data)
      if (columnOption) {
        const findIndex = columnOption.children.findIndex(item => item.id === data.id)
        if (findIndex !== -1) {
          columnOption.children.splice(findIndex, 0, obj)
        }
      } else {
        const findIndex = xDesignTable.tableColumnOptions.findIndex(item => item.id === data.id)
        if (findIndex !== -1) {
          xDesignTable.tableColumnOptions.splice(findIndex, 0, obj)
        }
      }
      xDesignTable.currentId = obj.id
    },
    getColumnOption(data) {
      const {xDesignTable} = this
      if (data.parentId) {
        return getTableColumnOption(xDesignTable.tableColumnOptions, data.parentId)
      }
      return null
    }
  }
}
</script>

<style scoped lang="css">
.x-render-drag-table-container {
  width: 100%;
  max-width: 100%;
  min-height: 80px;
  padding: 8px;
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px dashed #cccccc;
  margin: 10px 0;
}
</style>
